<div class="row">
	<form action="">
		<div class="col s6">
			<h1>In Progress :</h1>
		</div>
		<div class="col s6">
			<h1>Completed :</h1>
		</div>
	</form>
</div>
<div class="row padded">
	<div class="col s6">
		<div class="center-align" *ngIf="!job">
			<div class="preloader-wrapper big active">
				<div class="spinner-layer">
					<div class="circle-clipper left">
						<div class="circle"></div>
					</div><div class="gap-patch">
					<div class="circle"></div>
				</div><div class="circle-clipper right">
				<div class="circle"></div>
			</div>
		</div>
	</div>
</div>
<div *ngIf="job">
	<div *ngFor="let job of jobarray">
		<div class="card blue-grey darken-1">
			<div class="card-content white-text">
				<span>
					Case ID: {{job.body.case_id}}
				</span>
				<ul materialize="collapsible" data-collapsible="accordion">
					<li>
						<div class="collapsible-header">Audit Files</div>
						<div class="collapsible-body">
							<blockquote *ngFor="let audit of job.body.audit_file">
								<li>{{audit}}</li>
							</blockquote>
						</div>
					</li>
				</ul><br>
				<span>
					<span>In Progress: {{job.body.in_progress}}</span>
				</span> <br>
				<span>
					{{job.timestamp}}
				</span> <br>
				<span>
					UID: {{job.body.uid}}
				</span>
			</div>
		</div>
	</div>	
</div>
</div>
<div class="col s6">
	<div class="center-align" *ngIf="!completed">
		<div class="preloader-wrapper big active">
			<div class="spinner-layer">
				<div class="circle-clipper left">
					<div class="circle"></div>
				</div><div class="gap-patch">
				<div class="circle"></div>
			</div><div class="circle-clipper right">
			<div class="circle"></div>
		</div>
	</div>
</div>
</div>
<div class="largecontainer scrolling" *ngIf="completed">
	<div *ngFor="let job of completed">
		<div class="card blue-grey darken-1 carousel-item">
			<div class="card-content white-text">
				<span>
					<div class="btn-flat">
						<i class="material-icons left">label_outline</i>Case ID: {{job.case_id}}
					</div>
				</span>
				<ul materialize="collapsible" data-collapsible="accordion">
					<li>
						<div class="collapsible-header">Audit Files</div>
						<div class="collapsible-body">
							<blockquote *ngFor="let audit of job.audit_file">
								<li>{{audit}}</li>
							</blockquote>
						</div>
					</li>
				</ul><br>
				<div class="spacer">
					<span>
						<span *ngIf="job.is_complete">
							<div class="btn-flat green">
								<i class="material-icons right">done</i>Completed
							</div>
						</span>
					</span>
					<span>
						<div class="btn-flat">
							{{job.timestamp}}
						</div>
					</span>
					<span>
						<div class="btn-flat">
							UID: {{job.uid}}
						</div>
					</span>
				</div>
			</div>
		</div>
	</div>	
</div>
</div>
</div>

